<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>rem</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes">
    <style>
        .box {
            height: 500px;
            width: 30rem;
            margin: 0 auto;
            background-color: yellow;

        }

        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            width: 490px;
            height: 490px;
            overflow: hidden;
            background-color: antiquewhite;
            display: flex;
            flex-flow: row wrap;
            margin: 0 auto;
        }
        li{
            width: 30%;
            height: 30%;
            margin: 0 5% 5% 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 9px;
        }
        li:nth-of-type(3n){
            margin-right: 0;
        }
        li:nth-of-type(n+7){
            margin-bottom: 0;
        }
        li:hover{
            background-color: #f40;
        }
    </style>
</head>

<body>

    <ul >
        <li>盒子1</li>
        <li>盒子2</li>
        <li>盒子3</li>
        <li>盒子4</li>
        <li>盒子5</li>
        <li>盒子6</li>
        <li>盒子7</li>
        <li>盒子8</li>
        <li>盒子9</li>
    </ul>
    <div class="box">

    </div>
    <script>
        // document.querySelector('html').style.fontSize = document.documentElement.clientWidth + 'px'

        function resizeRefreshRem() {
            let goodSize = 20;
            let maxSize = 40; //最大的字体大小
            let screenWidth = 320; //常用设备的宽度
            // let w = document.documentElement.clientWidth; //实际客户端的设备宽度,调试模式开启后 会不准

            let w = screen.availWidth // 有效设备宽度
            let val = goodSize * (w / screenWidth)
            let remVal = val > maxSize ? maxSize : val
            document.documentElement.style.fontSize = remVal + 'px'
        }

        window.addEventListener('resize', resizeRefreshRem)
        window.addEventListener('load', resizeRefreshRem)
    </script>
</body>

</html>